/**
* 基础菜单 app设计管理
*/
<template>
  <div>
    <div id="emptyCls"></div>

    <div class="container-fluid">
      <div class="row">
        <el-row class="designMenu">
          <el-col :span="24">
            <el-button @click="$router.back(-1)" plain round size="mini">返回</el-button>
            <el-button type="primary" @click="save" plain round size="mini">保存</el-button>
            <el-button type="primary" @click="undo" plain round size="mini">撤销</el-button>
            <el-button type="primary" @click="redo" plain round size="mini">还原</el-button>
          </el-col>
        </el-row>
        <el-divider></el-divider>

        <nav id="sidebarMenu" class="col-md-2">
          <div class="card border-light mb-3">
            <div class="card-header">基础组件</div>
            <div class="card-body">
              <div class="toolBox row row-cols-2 g-2">
                <div class="col compoment bgcolor" com="bgcolor">
                  <i class="bi bi-palette-fill"></i>
                  <div>背景色</div>
                </div>
                <div class="col compoment layout" com="layout">
                  <i class="bi bi-grid-1x2-fill"></i>
                  <div>布局</div>
                </div>
                <div class="col compoment text" com="text">
                  <i class="bi bi-type"></i>
                  <div>文本</div>
                </div>
                <div class="col compoment button" com="button">
                  <i class="bi bi-stop-btn-fill"></i>
                  <div>按钮</div>
                </div>
                <div class="col compoment switch" com="switch">
                  <i class="bi bi-toggle-on"></i>
                  <div>开关</div>
                </div>
              </div>
            </div>
          </div>

        </nav>

        <main role="main" class="col-md-5">
          <div class="card-body designBox">
            <div class="phoneHead"></div>
            <div class="pageTitle">{{product.name}}设备详情</div>
            <div class="pageContent">
              <div id="rootWiget" class="main _container">
              </div>
            </div>
            <div class="pageBottom">
            </div>
          </div>
        </main>

        <div id="propertyBox" class="col-md-5">
          <el-tabs type="border-card">
            <el-tab-pane label="外观">

              <el-form ref="form" label-width="120px">
                <el-form-item label="格数" v-if="wgData.name=='layout' ">
                  <el-radio-group @change="updateWgData" v-model="wgData.props.colSize" size="small">
                    <el-radio-button label="1"></el-radio-button>
                    <el-radio-button label="2"></el-radio-button>
                    <el-radio-button label="3"></el-radio-button>
                    <el-radio-button label="4"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="文字" v-if="wgData.name=='text' || wgData.name=='button' ">
                  <el-input @change="updateWgData" v-model="wgData.props.text" size="small"></el-input>
                </el-form-item>
              </el-form>

            </el-tab-pane>
            <el-tab-pane label="交互">

              <el-form ref="form" label-width="120px">
                <el-form-item label="显示属性" v-if="wgData.name=='text' || wgData.name=='button'|| wgData.name=='switch' ">
                  <el-select v-model="wgData.binds.property" placeholder="选择属性">
                    <el-option label="无" value=""></el-option>
                    <el-option v-for="prop in properties" :key="prop.identifier" :label="prop.name" :value="prop.identifier">
                    </el-option>
                  </el-select>
                </el-form-item>
                <div v-if="wgData.name=='button'">
                  <el-form-item label="执行动作">
                    <el-select @change="serviceSelect" v-model="wgData.action.service.identifier" placeholder="选择要执行的动作">
                      <el-option v-for="s in services" :key="s.identifier" :label="s.name" :value="s.identifier">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="参数" v-if="wgData.action.service.identifier">
                    <el-row v-for="para in wgData.action.service.params" :key="para.identifier">
                      <el-col :span="6" style="text-align: center;">
                        {{para.name}}:
                      </el-col>
                      <el-col :span="18">
                        <el-input v-if="para.dataType.type=='text'" v-model="para.value" size="small"></el-input>
                        <el-select v-if="para.dataType.type=='bool'" v-model="para.value" placeholder="服务参数">
                          <el-option v-for="(key,value,index) in para.dataType.specs" :key="key" :label="key" :value="value">
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </div>

                <!--===========开关==============-->
                <div v-if="wgData.name=='switch'">
                  <el-form-item label="执行开动作">
                    <el-select @change="switchOnServiceSelect" v-model="wgData.action.switchOn.identifier" placeholder="选择要执行的动作">
                      <el-option v-for="s in services" :key="s.identifier" :label="s.name" :value="s.identifier">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="参数" v-if="wgData.action.switchOn.identifier">
                    <el-row v-for="para in wgData.action.switchOn.params" :key="para.identifier">
                      <el-col :span="6" style="text-align: center;">
                        {{para.name}}:
                      </el-col>
                      <el-col :span="18">
                        <el-input v-if="para.dataType.type=='text'" v-model="para.value" size="small"></el-input>
                        <el-select v-if="para.dataType.type=='bool'" v-model="para.value" placeholder="服务参数">
                          <el-option v-for="(key,value,index) in para.dataType.specs" :key="key" :label="key" :value="value">
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item label="执行关动作" v-if="wgData.name=='switch'">
                    <el-select @change="switchOffServiceSelect" v-model="wgData.action.switchOff.identifier"
                      placeholder="选择要执行的动作">
                      <el-option v-for="s in services" :key="s.identifier" :label="s.name" :value="s.identifier">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="参数" v-if="wgData.action.switchOff.identifier">
                    <el-row v-for="para in wgData.action.switchOff.params" :key="para.identifier">
                      <el-col :span="6" style="text-align: center;">
                        {{para.name}}:
                      </el-col>
                      <el-col :span="18">
                        <el-input v-if="para.dataType.type=='text'" v-model="para.value" size="small"></el-input>
                        <el-select v-if="para.dataType.type=='bool'" v-model="para.value" placeholder="服务参数">
                          <el-option v-for="(key,value,index) in para.dataType.specs" :key="key" :label="key" :value="value">
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </div>

              </el-form>

            </el-tab-pane>
          </el-tabs>

        </div>
      </div>

      <div id="compomentTemplate" style="display: none;">
        <div class="_compoment _bgcolor _container">
        </div>
        <div class="row row-cols-2 _compoment _layout">
        </div>
        <div class="col _cell _container">
        </div>
        <button type="button" class="btn btn-primary _compoment _button">按钮</button>
        <span class="_compoment _text">文本</span>
        <div class="_compoment _switch form-check form-switch">
          <input class="form-check-input" type="checkbox" checked>
        </div>
      </div>


    </div>


  </div>
</template>

<style scoped>
  @import '../../assets/css//bootstrap.min.css';
  @import '../../assets/css/bootstrap-icons.css';
  @import '../../assets/css/design.css';
</style>
<script>
  import '../../assets/js/jquery-3.6.0.min.js'
  import '../../assets/js/bootstrap.min.js'

  import {
    webDesign,
    propertySetting,
    designDataStack,
  } from '../../assets/js/design.js'

  import {
    DesignDetail,
    saveDesign,
  } from '../../api/appApi.js'
  import {
    GetProduct,
    GetThingModel,
  } from '../../api/productApi'

  export default {
    data() {
      return {
        nshow: true, //switch开启
        fshow: false, //switch关闭
        loading: false, //是显示加载
        designDetail: {},
        code: '',
        product: {},
        wgData: {
          binds: {
            property: {}
          },
          action: {
            service: {
              name: "",
              params: ""
            }
          }
        },
        properties: [],
        services: [],
        selectedSerivce: '',
      }
    },
    // 注册组件
    components: {},

    /**
     * 创建完毕
     */
    created() {
      this.getdata()
    },
    mounted() {
      webDesign.init();
      propertySetting.setVue(this);
    },
    watch: {
      wgData: {
        handler: function() {
          console.log('wgData:', this.wgData)
        },
        deep: true
      }
    },
    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      getdata(parameter) {
        this.loading = true
        let ddId = this.$route.query.id
        let pk = this.$route.query.productKey;
        DesignDetail(ddId)
          .then(res => {
            webDesign.restore(JSON.parse(res.template));
            this.loading = false;
          });

        GetProduct(pk)
          .then(res => {
            this.product = res;
          });

        GetThingModel(pk)
          .then(res => {
            this.loading = false
            this.properties = res.model.properties;
            let writeProperties = [];
            //可写属性
            this.properties.forEach(p => {
              if (p.accessMode.indexOf('w') >= 0) {
                writeProperties.push(p);
              }
            });
            res.model.services.push({
              identifier: 'set',
              name: '设置属性',
              inputData: writeProperties
            });

            this.services = res.model.services;
          }, err => {
            this.loading = false
          });
      },
      updateWgData() {
        console.log(propertySetting);
        propertySetting.update(this.wgData);
      },
      save() {
        let pk = this.$route.query.productKey;
        let ddId = this.$route.query.id
        let result = webDesign.serialize();
        console.log(JSON.stringify(result));
        saveDesign({
          id: ddId,
          productKey: pk,
          template: JSON.stringify(result)
        }).then(res => {
          this.$message({
            type: 'success',
            message: '保存成功！'
          })
        });
      },
      undo() {
        designDataStack.undo();
      },
      redo() {
        designDataStack.redo();
      },
      actionSelect(v) {
        console.log(v);
      },
      actionServiceSet(v, type) {
        for (let i in this.services) {
          let service = this.services[i];
          if (service.identifier == v) {
            this.wgData.action[type] = {
              identifier: service.identifier,
              name: service.name,
              params: JSON.parse(JSON.stringify(service.inputData))
            };
          }
        }
      },
      serviceSelect(v) {
        this.actionServiceSet(v, 'service');
      },
      switchOnServiceSelect(v) {
        this.actionServiceSet(v, 'switchOn');
      },
      switchOffServiceSelect(v) {
        this.actionServiceSet(v, 'switchOff');
      }
    }
  }
</script>
